﻿@page "/chart/live-chart"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using System.Collections.ObjectModel
@using System.Timers

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the live CPU usage of a machine using the default line series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the live chart. 
    The chart automatically updates itself after every 500 milliseconds and the <code>ObservableCollection</code> type is used as the data source, which is triggered on every data update within it.</p>
    <p>More information about the marker can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/vertical-chart'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section" align="center">
    <SfChart @ref="liveChart" Title="CPU Usage" Width="100%" Theme="@theme">
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="mm:ss" Title="Time (s)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryYAxis Title="Usage" Minimum="0" Interval="20" Maximum="100" LabelFormat="{value}%">
            <ChartAxisLineStyle Width="0" Color="transparent"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries Type="ChartSeriesType.Line" Width="2" DataSource="@DataPoints"
                         XName="@nameof(ChartDataPoint.Time)" YName="@nameof(ChartDataPoint.CPU_Usage)">
                <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{
    private static Timer timer;
    private SfChart liveChart;
    private double dataLength = 100;
    private Random randomNum = new Random();
    private Theme theme { get; set; }
    public ObservableCollection<ChartDataPoint> DataPoints;

    protected override void OnInitialized()
    {
        theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);

        // Provide the chart with initial data during page load.
        DataPoints = new ObservableCollection<ChartDataPoint>();
        for (int i = 0; i < dataLength; i++)
            DataPoints.Add(new ChartDataPoint
            {
                Time = DateTime.Now.AddSeconds(i + 10),
                CPU_Usage = randomNum.Next(30, 80)
            });

        // Starting live update in the chart.
        timer = new Timer(500);
        timer.Elapsed += AddData;
        timer.AutoReset = true;
        timer.Enabled = true;
    }

    private void AddData(Object source, ElapsedEventArgs e)
    {
        if (liveChart == null)
            return;
        dataLength++;
        DataPoints.RemoveAt(0);
        DataPoints.Add(new ChartDataPoint
        {
            Time = DateTime.Now.AddSeconds(dataLength + 10),
            CPU_Usage = randomNum.Next(30, 80)
        });
    }

    public class ChartDataPoint
    {
        public DateTime Time { get; set; }
        public double CPU_Usage { get; set; }
    }
}
